<template>
  <li>
    <el-card shadow="hover" style="padding: 10px;">
      <el-row align="middle" justify="space-between">
        <!-- 文件夹图标和名称 -->
        <el-col :span="8">
          <span style="cursor: pointer; font-size: 15px;">
            📁 {{ node }}
          </span>
        </el-col>

        <!-- 按钮区域 -->
        <el-col :span="16" style="text-align: right;">
          <el-button size="small" type="primary" @click="$emit('view-images', node)">查看图片</el-button>
          <el-button size="small" type="success" @click="$emit('view-info', node)">查看详情</el-button>
          <el-button size="small" type="warning" @click="$emit('download-folder', node)">下载</el-button>
        </el-col>
      </el-row>
    </el-card>
  </li>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node']
}
</script>

<style scoped>
.el-card {
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}
</style>